<template>
  <div style="">
    <div class="content">
      <ul>
        <li @click="$router.push('/works')" style="color: rgb(70, 210, 51)">
          作品
        </li>
        <li @click="$router.push('/album')">专辑</li>
        <li @click="$router.push('/collection')">收藏</li>
        <li @click="$router.push('/profile')">资料</li>
        <li @click="$router.push('/honor')">荣誉</li>
      </ul>
    </div>
    <div class="works">
      <n-card
        title=""
        style="margin-bottom: 0px; background-color: rgb(239, 239, 245)"
      >
        <n-tabs type="line" class="works_tabs">
          <n-tab-pane name="oasis" tab="全部">
             <n-card
                v-for="(work, index) in works"
                :key="index"
                class="content_card"
              >
                <template #cover>
                  <img :src="works[index].works_url" />
                  <div class="div_data">{{ works[index].upload_time }}</div>
                  <h3 align="left">{{ works[index].works_title }}</h3>
                  <div align="left" class="div_labe">
                    <el-tag type="success">{{
                      works[index].works_label
                    }}</el-tag>
                  </div>
                  <div class="div_xx">
                    <span>
                      <i class="el-icon-view"></i> {{ works[index].page_view }}
                    </span>
                    <span style="visibility: hidden">
                      <i class="el-icon-star-off"></i
                    ></span>
                    <span>删除作品</span>
                  </div>
                </template>
              </n-card>
          </n-tab-pane>

          <n-tab-pane name="jay chou" tab="博文">暂无作品</n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
  </div>
</template>

<script>
import { getWorks } from "@/network/works.js";
export default {
  components: {},
  data() {
    return {
      works: [
        {
          works_id: "",
          works_url: "",
          page_view: "",
          works_introduce: "",
          upload_time: "",
          works_title: "",
          works_label: "",
        },
      ],
      activeName: "second",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    getWorks(1).then((res) => {
      console.log(res.data);
      this.works = res.data;
    });
  },
};
</script>
<style scoped lang="less">
.content {
  padding: 30px;
  background-color: white;
  border-top: 3px solid rgb(238, 238, 238);
  border-bottom: 1px solid rgb(238, 238, 238);
  ul {
    width: 800px;
    list-style: none;
    margin-left: 15%;
    li {
      font-size: 14px;
      position: relative;
      top: -20px;
      left: 30%;
      float: left;
      margin-left: 40px;
    }
  }
  div {
    span {
      font-size: 1px;
    }
  }
}

.works {
  min-width: 1400px;
  .works_tabs {
    width: 100%;
    
  }
  .content_card {
    position: relative;
    left: 90px;
    img {
      width: 360px;
      height: 300px;
    }
    float: left;
    margin-top: 4%;
    margin-left: 4%;
    width: 360px;
    height: 450px;
  }
  .div_data {
    position: relative;
    top: 5px;
    left: -90px;
    color: gray;
  }
  h3 {
    margin-top: 5px;
    margin-left: 50px;
  }
  .div_labe {
    margin-top: -7px;
    margin-left: 50px;
  }
  .div_xx {
    margin-top: 10px;
    span:nth-child(1) {
      position: relative;
      left: -60px;
      i {
        position: relative;
        top: 2px;
        left: -13px;
        font-size: 20px;
        color: gray;
      }
    }
    span:nth-child(2) {
      i {
        position: relative;
        top: 2px;
        left: -13px;
        font-size: 20px;
        color: gray;
      }
    }
    span:nth-child(3) {
      position: relative;
      left: 100px;
      color: gray;
    }
  }
}
</style>